<template>
	<view class="fabuContainer">
		<!-- 头部区域开始 -->
		<view class="fabuHeader">
			<view class="title">
				<text>发布日记</text>
			</view>
			<view class="headerButton">
				<view class="fabuBtn" @click="release">
					<text>发布</text>
				</view>
			</view>
		</view>
		<!-- 头部区域结束 -->
		<!-- 文本输入框区域开始 -->
		<view class="fabuTextArea">
			<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
		</view>
		<!-- 文本输入框区域结束 -->
		<view class="fabuInput">
			<input type="text" v-model="inputValue" placeholder="添加话题(可省略)" />
		</view>
		<!-- 上传区域开始 -->
		<u-upload :custom-btn="true">
			<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
				<image src="../../../static/jzqIcon/uploadIcon.png" mode=""></image>
				<text>上传图片</text>
			</view>
		</u-upload>

		<!-- 上传区域结束 -->
	</view>
</template>

<script>
	import {
		request
	} from "../../../util/api";
	import {
		TOAST
	} from "../../../util/util";
	export default {
		data() {
			return {
				value: '',
				type: 'textarea',
				border: true,
				height: 200,
				autoHeight: true,
			};
		},
		onLoad() {
			this.release()
		},
		methods: {
			release() {
				request({
					url:"/system/CompassDiary",
					method:"post",
					data:{
						diaryDesc:this.value,
						inputValue:this.inputValue,
						// fileList:""
					}
				}).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fabuContainer {
		padding: 20rpx 34rpx;

		// 头部样式=
		.fabuHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.headerButton {
				width: 148rpx;
				height: 64rpx;
				background-color: #2A6CAC;
				border-radius: 10rpx;
				line-height: 64rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}

		// 文本输入域样式
		.fabuTextArea {
			margin: 20rpx 0;
		}

		// 输入框样式
		.fabuInput {
			input {
				width: 400rpx;
				border: 1rpx solid #CCCCCC;
				font-size: 28rpx;
				height: 60rpx;
				padding: 0 20rpx;
				border-radius: 30rpx;
			}
		}

		.slot-btn {
			width: 162rpx;
			height: 162rpx;
			display: flex;
			margin-top: 20rpx;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			text {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #7f7f7f;
			}
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
	}
</style>
